import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { ExportFileService } from '@core/exportFile';
import { environment } from '../../../../environments/environment';
import { TableComponent } from './table.component';
declare const echarts: any;

@Component({
    selector: 'app-dangerstatistics',
    templateUrl: './dangerStatistics.component.html',
    styleUrls: ['./dangerStatistics.component.less']
})

export class DangerStatisticsComponent implements OnInit {
    @ViewChild('tcp', { static: true }) tcp: TableComponent;
    searchParam: any = {};
    apiUrl: any = {};
    tableScroll: any = {};
    headData = [];
    plainData = [];
    tempData = [];
    operaList: any = [
        { detailModal: false }
    ];
    paramType = '';
    paramTypeName = '';
    tabsIndex = 0;
    queryUrl = '';
    treeNodeStyle = { 'max-height': '300px', 'overflow-y': 'auto', 'overflow-x': 'hidden' };

    constructor(
        private http: HttpClient,
        private exportFile: ExportFileService,
        private datePipe: DatePipe
    ) { }

    ngOnInit() {
        this.searchParam.deadlineL = this.datePipe.transform(new Date(), 'yyyy-MM') + '-01';
        this.searchParam.deadlineR = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
        this.tabCont(this.tabsIndex);
        this.apiUrl.detail = environment.project + '/safeHideProblem/groupDetail';
    }
    tabsChange(e) {
        this.tabsIndex = e.index;
        this.tabCont(e.index);
    }
    tabCont(type) {
        switch (type) {
            case 0:
                this.headData = [
                    { "name": "部门名称", "width": "" },
                    { "name": "一般", "width": "10%" },
                    { "name": "突出", "width": "10%" },
                    { "name": "重大", "width": "10%" },
                    { "name": "未销号", "width": "10%" },

                    { "name": "已销号", "width": "10%" },
                    { "name": "总计", "width": "10%" },
                    { "name": "占比", "width": "10%" }
                ];
                this.plainData = [
                    "orgName", "一般", "突出", "重大", "nonOver",
                    "over", "total", "ratio"
                ];
                this.paramTypeName = '按责任部门统计';
                this.paramType = 'org';
                this.queryUrl = environment.project + '/safeHideProblem/groupByOrg';
                break;
            case 1:
                this.headData = [
                    { "name": "问题等级", "width": "" },
                    { "name": "未销号", "width": "15%" },
                    { "name": "已销号", "width": "15%" },
                    { "name": "总计", "width": "15%" },
                    { "name": "占比", "width": "15%" }
                ];
                this.plainData = [
                    "problemLevel", "nonOver", "over", "total", "ratio",
                ];
                this.paramTypeName = '按等级统计';
                this.paramType = 'level';
                this.queryUrl = environment.project + '/safeHideProblem/groupByLevel';
                break;
        }
        this.search();
    }
    search() {
        let params = '';
        for (const item of Object.keys(this.searchParam)) {
            const data = this.searchParam[item];
            if (data || data === 0) {
                params += '&' + item + '=';
                if (data instanceof Date) {
                    params += this.datePipe.transform(data, 'yyyy-MM-dd');
                } else {
                    params += data;
                }
            }
        }
        this.tcp.loadList(this.queryUrl, params, (data) => {
            const total = [];
            const ratio = [];
            const orgRatio = [];
            const levelRatio = [];
            let option = {};

            for (const item of data) {
                total.push(item.total);
                ratio.push(item.ratio);
                orgRatio.push({
                    value: item.total,
                    name: item.orgName
                });
                levelRatio.push({
                    value: item.total,
                    name: item.problemLevel
                });
            }
            switch (this.tabsIndex) {
                case 0:
                    option = {
                        legend: {
                            left: 'center',
                            data: ratio
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}<br/>{c} ({d}%)'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: '65%',
                                center: ['50%', '50%'],
                                selectedMode: 'single',
                                data: orgRatio,
                                label: {
                                    normal: {
                                        formatter: '{b} {c} \n({d}%)'
                                    }
                                }
                            }
                        ]
                    };
                    break;
                case 1:
                    option = {
                        legend: {
                            left: 'center',
                            data: ratio
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}<br/>{c} ({d}%)'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: '65%',
                                center: ['50%', '50%'],
                                selectedMode: 'single',
                                data: levelRatio,
                                label: {
                                    normal: {
                                        formatter: '{b} {c} \n({d}%)'
                                    }
                                }
                            }
                        ]
                    };
                    break;
            }
            echarts.init(document.getElementById('echarts')).setOption(option, true);
        });
    }
    detail(e) {
        this.tempData = e;
        this.modalShow('detailModal');
    }
    export() {
        const name = this.paramTypeName + ' ' + this.datePipe.transform(this.searchParam.deadlineL, 'yyyy-MM-dd') + '至' + this.datePipe.transform(this.searchParam.deadlineR, 'yyyy-MM-dd') + '.xls';
        this.exportFile.tableExport(document.getElementById("dangerStatistics"), name);
    }

    modalShow(type) {
        this.operaList[type] = true;
    }
    modalHide(type) {
        this.operaList[type] = false;
    }
}
